<template>
    <div id="TodoItem">
        <div id="todoDetails">
            <p id="addData" @click="showPopup()"><span class="iconfont icon-jiahao"></span> 添加任务</p>
            <p id="dataClear" @click="dataClear">删除所有任务</p>
            <h5  id="noNotes">暂无待办事项</h5>
            <h5  id="notes">已完成{{ notesOk }}/全部{{ props.plans.length }}</h5>
            <h5  id="searchNotes">已完成{{ props.k }}/全部{{ props.j }}</h5>
            <h5  id="searchNoNotes">没有相关任务</h5>
        </div>
        <div id="overlay">
			<div class="popup">
				<p class="popup_title">提示</p>
				<input class="popup_content" type="text" id="inputId" placeholder="请输入你要添加的任务"  v-model.lazy="message">
				<div class="popup_btn">
					<button class="cancelBtn" @click="hidePopup()">取消</button>
					<button class="confirmBtn" @click="save()">确认</button>
				</div>
			</div>
	  	</div>
    </div>
</template>

<script setup>
    import { ref,onMounted,defineEmits,watch } from 'vue'

	const message = ref('')
	const emit = defineEmits(['someEvent','getData'])
    const notesOk= ref(0)

    const props = defineProps({
		plans: Array,
        j: Number,
        k: Number
	})

    watch(() => props.j, ( oldValue) => {
        if(oldValue==0){
            document.querySelector('#searchNoNotes').style.display = 'block' 
        }
        else{
            document.querySelector('#searchNotes').style.display = 'block'
        }
        document.querySelector('#notes').style.display = 'none'
    })

    onMounted(() => {
		let j = 0
        if(props.plans.length==0){
            document.querySelector('#notes').style.display = 'none'
            document.querySelector('#noNotes').style.display = 'block'
        }else{
            document.querySelector('#notes').style.display = 'block'
            document.querySelector('#noNotes').style.display = 'none'
        }
		for (let i = 0; i < props.plans.length; i++) {
            if (props.plans[i].state) {
                j++
            }
		}
		notesOk.value = j
	});

    function dataClear () {
		window.localStorage.clear(); //清除缓存
		location.reload()
	}
    function showPopup () {
		var overlay = document.getElementById("overlay");
		overlay.style.display = "block";
	}
    function hidePopup () {
		var overlay = document.getElementById("overlay");
		overlay.style.display = "none";
		document.getElementById("inputId").value = "";
	}
	function save () {
		var overlay = document.getElementById("overlay");
		overlay.style.display = "none";
		emit("someEvent",message.value)
		document.getElementById("inputId").value = "";
	}
</script>

<style scoped>
    #TodoItem{
        height: 15vh;
        width: 84%;
        margin-left: 8%;
        margin-top: 20px;
    }
    #todoDetails{
        margin-top: 5px;
        padding-left: 40px;
        width: 94%;
        height: 40px;
        line-height: 10px;
        background-color: rgba(255, 255, 255, 0.1);
    }
    #todoDetails p,#todoDetails h5{
        float: left;
    }
    #dataClear{
        margin-left: 20%;
    }
    #notes,#noNotes{
        margin-left: 20%;
        margin-top: 18px;
    }
    #searchNotes,#searchNoNotes{
        margin-left: 20%;
        margin-top: 18px;
        display: none;
    }
    #overlay {
		position: fixed;
		left: 0px;
		top: 0px;
		width: 100%;
		height: 100%;
		font-size: 16px;
		background-color: rgba(0, 0, 0, 0.5);
		filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#7f000000,endColorstr=#7f000000);
		display: none;
	}
	/* 弹出框主体 */
	.popup {
		background-color: #ffffff;
		max-width: 400px;
		min-width: 200px;
		height: 240px;
		border-radius: 5px;
		margin: 100px auto;
		text-align: center;
	}
	/* 弹出框的标题 */
	.popup_title {
		height: 60px;
		line-height: 60px;
		border-bottom: solid 1px #cccccc;
	}
	/* 弹出框的内容 */
	.popup_content {
		height: 25px;
		line-height: 25px;
		padding-left: 5px;
		margin-top: 20px;
	}
	/* 弹出框的按钮栏 */
	.popup_btn {
		margin-top: 30px;
	}
	/* 弹出框的按钮 */
	.popup_btn button {
		color: #778899;
		width: 40%;
		height: 40px;
		cursor: pointer;
		border: solid 1px #cccccc;
		border-radius: 5px;
		margin: 5px 10px;
		color: #ffffff;
		background-color: #337ab7;
	}
</style>